<html>
<head>
    <title>{% block title %}{% endblock %}</title>
    <style type="text/css">
        * {
            margin:  0;
            padding: 0;
        }

        body {
            font-family: 'Droid Sans', 'Helvetica', 'Arial', sans;
            padding: 1em;
        }

        h2 {
            margin-bottom: 0.7em;
        }

        div {
            width: 600px;
            max-height: 300px;
            overflow: auto;
            padding: 1em;
            margin-bottom: 1em;
        }

        .output {
            font-family: 'Droid Sans Mono', monospaced;
        }
        
        #info {
            border: 2px solid #000;
            color: #fff;
            background: #000;

        }

        #error {
            border: 2px solid #f00;
            color: #f00;
            background: #ffc4c4;
        }
    </style>
</head>
<body>
	{% if book %}
	    <ul>
	    <table>
	    	<tr>
	    		<td>
		    		<br><img src="{{book.image_url}}" align="left"/>
		    	</td>
	    		<td> 
	    			<align="right">{{book.title}} 
	    			<br>
	    			By:
		    		{% for author in authors %}
			    		{{author.author}} 
		    		{% endfor %}
		    		<br>
		    		<br>
		    		<table border="2" width="75%">
			    		<tr>
		    				<td>Vendor</td>
	    					<td>Condition</td>
	    					<td>Price</td>
	    					<td>Cart</td>
		    			</tr>
	    				{% for price in prices %}
	    					<tr>
	    					<td>{{price.vendor}}</td>
	    					<td>{{price.condition}}</td>
	    					<td>{{price.price}}</td>
	   						<td>
	   						<a href="http://127.0.0.1:8000/cart/add/?product_id={{book.uuid}}
	   						&price={{price.price}}&vendor={{price.vendor}}&purchase_url={{price.purchase_url}}
	   						&title={{book.title}}">Add
	   						</a>
	   						</td>
    						</tr>
    					{% endfor %}
	    				
	   				</table>
	    		</td>
	    	</tr>
	    	<tr>
	    		Description: {{book.description}}
	    	</tr>
	    </table>
    	</ul>
	{% else %}
    	<p>Item does not exist. Check the product ID and try again.</p>
	{% endif %}
</body>
</html>